<template>
  <div class="app-container">
    <div class="base64-content">
      <div class="base64-left">
        <el-input
          type="textarea"
          :autosize="{ minRows: 10, maxRows: 10 }"
          placeholder="请输入需要加密的字符串"
          v-model="inputString"
        />
        <el-divider content-position="left">
          <span style="font-weight: bolder">文件Base64编码</span>
        </el-divider>
        <el-upload
          class="upload-demo"
          drag
          action="#"
          :show-file-list="false"
          :http-request="httpRequest"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">请选择文件进行编码</div>
        </el-upload>
      </div>
      <div class="base64-center">
        <div class="base64-button">
          <el-button type="success" @click="encode">
            编码
            <i class="el-icon-arrow-right el-icon--right" />
          </el-button>
        </div>
        <div class="base64-button">
          <el-button icon="el-icon-arrow-left" type="primary" @click="decode"
            >解码
          </el-button>
        </div>
      </div>
      <div class="base64-right">
        <el-input
          type="textarea"
          :autosize="{ minRows: 30, maxRows: 30 }"
          placeholder="请输入需要解码的BASE64码"
          v-model="outputString"
        />
      </div>
      <div class="base64-remark">
        <h2>Base64编码说明</h2>
        <p>
          Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。可查看RFC2045～RFC2049，上面有MIME的详细规范。
        </p>
        <p>
          Base64编码是从二进制到字符的过程，可用于在HTTP环境下传递较长的标识信息。例如，在Java
          Persistence系统Hibernate中，就采用了Base64来将一个较长的唯一标识符（一般为128-bit的UUID）编码为一个字符串，用作HTTP表单和HTTP
          GET
          URL中的参数。在其他应用程序中，也常常需要把二进制数据编码为适合放在URL（包括隐藏表单域）中的形式。此时，采用Base64编码具有不可读性，需要解码后才能阅读
        </p>
        <p>
          Base64编码要求把3个8位字节（3*8=24）转化为4个6位的字节（4*6=24），之后在6位的前面补两个0，形成8位一个字节的形式。
          如果剩下的字符不足3个字节，则用0填充，输出字符使用'='，因此编码后输出的文本末尾可能会出现1或2个'='。
          为了保证所输出的编码位可读字符，Base64制定了一个编码表，以便进行统一转换。编码表的大小为2^6=64，这也是Base64名称的由来。
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Base64",
  data() {
    return {
      inputString: "",
      outputString: "",
    };
  },
  methods: {
    encode() {
      this.outputString = Base64.encode(this.inputString);
    },
    decode() {
      this.inputString = Base64.decode(this.outputString);
    },
    httpRequest(data) {
      console.log(data);
      // 没事儿就打印data看看呗
      //这是限制上传文件类型
      // const isPFX = data.file.type === "image/png";
      // const isLt2M = data.file.size / 1024 / 1024 / 1024 / 1024 / 1024 < 2;
      // if (!isPFX) {
      //   this.$message.error("上传文件只能是图片格式!");
      // } else if (!isLt2M) {
      //   this.$message.error("上传文件大小不能超过 5MB!");
      // } else {
      //   // 转base64
      //   this.getBase64(data.file).then((resBase64) => {
      //     this.outputString = resBase64.split(",")[1]; //直接拿到base64信息
      //     // console.log(resBase64.split(",")[1]);
      //   });
      //   // this.$message.success("文件上传成功");
      // }
      this.getBase64(data.file).then((resBase64) => {
        this.outputString = resBase64.split(",")[1]; //直接拿到base64信息
        // console.log(resBase64.split(",")[1]);
      });
    },
    getBase64(file) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader();
        let fileResult = "";
        reader.readAsDataURL(file); //开始转
        reader.onload = function () {
          fileResult = reader.result;
        }; //转 失败
        reader.onerror = function (error) {
          reject(error);
        }; //转 结束  咱就 resolve 出去
        reader.onloadend = function () {
          resolve(fileResult);
        };
      });
    },
  },
};
</script>

<style scoped>
.base64-content {
  display: flex;
}
.base64-right,
.base64-left {
  width: 25vw;
}
.base64-center {
  width: 8vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.base64-button {
  height: 36px;
}
.base64-remark {
  margin-left: 20px;
  width: 350px;
  min-width: 300px;
}
.base64-remark p {
  color: gray;
}
</style>
